<link rel="stylesheet" href="/static/Admin/css/bootstrap-select.min.css">
<script src="/static/Admin/js/bootstrap-select.min.js"></script>
<div id="main">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ntModalLabel">{:lang('add/change_the_company_department')}</h4>
    </div>
    <div class="modal-body">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab" @click="changelang('zh')">{:lang('Chinese')}</a>
                    </li>
                    <li>
                        <a href="#profile" data-toggle="tab" @click="changelang('en')">{:lang('English')}</a>
                    </li>
                    <li>
                        <a href="#messages" data-toggle="tab" @click="changelang('pt')">{:lang('Portuguese')}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-content" v-cloak>
            <table class="table table-hover ntTable" style="margin-top: -20px;">
                <tbody>
                <tr>
                    <td class="col-md-2">{:lang('country')}<span class="required"></span></td>
                    <td>
                        <select class="form-control col-md-2" v-model="data.country_id" @change="changecountry">
                            <option :value="key" v-for="(item,key) in country" :disabled="is_count">{{item}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-2">{:lang('belongs_to_the_department')}<span class="required"></span></td>
                    <td class="getframelist">
                        <select class="form-control col-md-2" v-model="data.pid">
                            <option value="0" :disabled="isdis">{:lang('general_headquarters')}</option>
                            <option :value="item.id" v-for="(item,index) in frames" :disabled="isdis">
                                <template v-for="(item,index) in item.level">&nbsp;&nbsp;&nbsp;&nbsp;</template>
                                {{item.langname}}
                            </option>
                        </select>
                    </td>
                </tr>
                {if ($str neq 'departmentedit')}
                <tr>
                    <td class="col-md-2">{:lang('department_name')}<span class="required"></span></td>
                    <td>
                        <input type="text" v-model="data.frame" class="form-control"
                               placeholder="{:lang('department_name')}" value="">
                    </td>
                </tr>
                {/if}
                </tbody>
            </table>
            <div role="tabpanel" class="tab-pane active" id="home" style="margin-top: -20px;">
                <table class="table table-hover ntTable">
                    <tbody>
                    {if ($str eq 'departmentedit')}
                    <tr>
                        <td class="col-md-2">{:lang('department_name')}<span class="required"></span></td>
                        <td>
                            <input type="text" v-model="data.lang_zh" class="form-control"
                                   placeholder="{:lang('department_name')}" value="">
                        </td>
                    </tr>
                    {/if}
                    </tbody>
                </table>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <table class="table table-striped table-hover ntTable">
                    <tbody>
                    {if ($str eq 'departmentedit')}
                    <tr>
                        <td class="col-md-2">{:lang('department_name')}<span class="required"></span></td>
                        <td>
                            <input type="text" v-model="data.lang_en" class="form-control"
                                   placeholder="{:lang('department_name')}" value="">
                        </td>
                    </tr>
                    {/if}
                    </tbody>
                </table>
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">
                <table class="table table-striped table-hover ntTable">
                    <tbody>
                    {if ($str eq 'departmentedit')}
                    <tr>
                        <td class="col-md-2">{:lang('department_name')}<span class="required"></span></td>
                        <td>
                            <input type="text" v-model="data.lang_pt" class="form-control"
                                   placeholder="{:lang('department_name')}" value="">
                        </td>
                    </tr>
                    {/if}
                    </tbody>
                </table>
            </div>
            <input type="hidden" id="act" name="act" value="{$str}">
            <input type="hidden" id="country_id" value="{$country_id|default=''}">
            <input type="hidden" name="id" id="did" value="{$id|default=''}">
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove"></span>{:lang('cancel')}
        </button>
        <a href="javascript:;" @click="subfun" class="btn btn-primary"
           style="padding-left:24px;padding-right:24px"> <span
                class="glyphicon glyphicon-floppy-disk"></span>{:lang('save')}</a>
    </div>
</div>
<script>
    new Vue({
        el: '#main',
        data: () => ({
            lang: 'zh',//语言
            iftijiao: true,
            country: [],
            frames: [],
            isdis: false,
            is_count: false,
            data: {
                country_id: '0',
                pid: '0',
                lang_zh: '',
                lang_en: '',
                lang_pt: '',
                frame: '',
            }
        }),
        methods: {
            //保存数据
            subfun(){
                if (this.iftijiao) {
                    if ($('#act').val() == 'departmentedit') {
                        //编辑
                        var data = {
                            lang_zh: this.data.lang_zh,
                            lang_en: this.data.lang_en,
                            lang_pt: this.data.lang_pt,
                            act: $('#act').val(),
                            id: $('#did').val(),
                            country_id: this.data.country_id,
                            pid: this.data.pid,
                        }
                    } else {
                        //添加和子添加
                        var data = {
                            act: $('#act').val(),
                            frame: this.data.frame,
                            country_id: this.data.country_id,
                            pid: this.data.pid,
                        }
                    }
                    $.ajax({
                        url: '/admin/organization/' + $('#act').val(),
                        data,
                        type: 'post',
                        success: (data) => {
                            data = JSON.parse(data)
                            console.log(data)
                            if (data.status != 1) {
                                //错误信息
                                change_mes_type('.modal-body .alert',data.status)
                                $('.modal-body .alert').show()
                                $('.modal-body .alert p').html('*' + data.msg + '<br>')
                            } else {
                                change_mes_type('.alert',data.status)
                                this.iftijiao = false
                                $('.alert').show()
                                $('.alert p').html('*' + data.msg + '<br>')
                                $('#myModal').modal('toggle')
                            }
                        }
                    })
                }
            },
            getalldata(){
                //获取国家，编辑，添加的数据
                $.ajax({
                    url: '/admin/organization/' + $('#act').val(),
                    data: {
                        getframe: '',
                        id: $('#did').val()
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        this.country = data.country;
                        if (data.info) {
                            //编辑
                            this.data.lang_zh = data.info.lang_zh;//中文部门
                            this.data.lang_en = data.info.lang_en;//
                            this.data.lang_pt = data.info.lang_pt;//
                            this.data.country_id = data.info.country_id;
                            //含有子部门不能选择国家
                            this.is_count = data.info.isexist != 1 ? false : true
                            this.data.pid = data.info.pid;
                            this.getdata();//获取所属国家下的部门
                        }
                        if (data.infos) {
                            this.data.country_id = data.infos.country_id;
                            this.data.pid = data.infos.id;
                            this.is_count = true;//所属国家无法选择
                            this.isdis = true;//所属部门无法选择
                        }
                        this.getdata();
                    }
                })
            },
            //获取对应国家部门
            getdata(){
                $.ajax({
                    url: '/admin/api/postionfrmaes',
                    data: {
                        country_id: this.data.country_id,
                        table: 'department',
                        lang: this.lang
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        this.frames = data;
                    }
                })
            },
            //改变国家
            changecountry(){
                if (this.data.country_id != $('#country_id').val()) {
                    this.getdata();//重新获取国家下的部门
                    this.data.lang_zh = ''
                    this.data.lang_en = ''
                    this.data.lang_pt = ''
                    this.data.pid = '0'
                } else {
                    this.getalldata();
                }
            },
            //改变语言
            changelang(lang){
                this.lang = lang;
                this.getdata();
            }
        },
        mounted() {
            this.getalldata()
        }
    })
</script>

